<template>
  <view id="productID">
    <view>
      <TableTitle :title="'生产和使用监控'"></TableTitle>
    </view>
    <view class="tableContentClass">
      <view class="liClass">生产总量：{{ data.countAdd }}桶</view>
      <view class="liClass">销毁总量：{{ data.countDel }}桶</view>
      <view class="liClass">实时生产总量：{{ data.dayAdd }}桶</view>
      <view class="liClass">实时销毁总量：{{ data.dayDel }}桶</view>
      <view class="liClass">当月生产总量：{{ data.monthAdd }}桶</view>
      <view class="liClass">当月销毁总量：{{ data.monthDel }}桶</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useWebsocketStore } from '@/stores/modules/websocket'
import { useyanZhengStore } from '@/stores/modules/yanZheng'
const yanZhengStore = useyanZhengStore()
const data = ref({
  countAdd: 8977677457,
  countDel: 4032553452,
  dayAdd: 275,
  dayDel: 233,
  monthAdd: 6929432,
  monthDel: 5962466,
})

watch(
  () => useWebsocketStore().date,
  () => {
    data.value.countAdd += 1
    // data.value.countDel += 1
    data.value.dayAdd += 1
    // data.value.dayDel += 1
    data.value.monthAdd += 1
    // data.value.monthDel += 1
  },
)

watch(
  () => yanZhengStore.code,
  () => {
    if (yanZhengStore.code.length > 0) {
      data.value.countAdd += 1
      data.value.countDel += 1
      data.value.dayAdd += 1
      data.value.dayDel += 1
      data.value.monthAdd += 1
      data.value.monthDel += 1
    } else {
      // data.value.countAdd += 1
      data.value.countDel += 1
      // data.value.dayAdd += 1
      data.value.dayDel += 1
      // data.value.monthAdd += 1
      data.value.monthDel += 1
    }
  },
)
</script>

<style lang="scss" scoped>
#productID {
  height: 85vh;
  width: 30vw;
  background: url('../../static/images/Large_Content_Box.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 0 1vw;
  margin-top: 10px;

  .tableContentClass {
    margin-top: 30px;
    background: #0000;
    height: 94%;
    overflow-y: scroll;
    // overflow-y: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    color: #fff;
    font-size: 2.5vh;
    &::-webkit-scrollbar {
      display: none;
    }

    .liClass {
      padding-inline-start: 0 !important;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0.1;
}
</style>
